<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级通知公告</title>
    <!-- 引入jQuery -->
    <script src="/static/jquery/jquery.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="/static/bootstrap/bootstrap.min.css" rel="stylesheet">
     <!-- 引入Vue.js -->
    <script src="/static/vue/vue.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
</head>
<body>
    <div id="app" class="container mt-5">
        <!-- 标题 -->
        <h1 class="mb-4">班级通知公告</h1>

        <!-- 通知公告列表 -->
        <div class="notice-list">
            <div v-for="notice in notices" :key="notice.id" class="mb-2">
                <a :href="notice.link" class="text-decoration-none">{{ notice.title }}</a>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    notices: [
                        { id: 1, title: "通知公告1", link: "https://example.com/notice1" },
                        { id: 2, title: "通知公告2", link: "https://example.com/notice2" },
                        { id: 3, title: "通知公告3", link: "https://example.com/notice3" }
                    ]
                };
            }
        });
    </script>
</body>
</html>